<h1 mat-dialog-title>
  {{ 'contract_agreement_page.ini_transfer' | translate }}
</h1>
<mat-dialog-content class="w-[800px]">
  <form [formGroup]="form.all">
    <div class="flex flex-col mt-[10px]">
      <div class="form-section-title">
        {{ 'contract_agreement_page.datasink' | translate }}
      </div>

      <!-- Data Address Type -->
      <data-address-type-select
        mode="Datasink"
        [label]="'general.type' | translate"
        [control]="
          form.all.controls.dataAddressType
        "></data-address-type-select>

      <!-- Datasink Config JSON -->
      <mat-form-field
        *ngIf="
          form.dataAddressType === 'Custom-Data-Address-Json' &&
            form.all.controls.dataDestination;
          let ctrl
        "
        color="accent">
        <mat-label>{{
          'contract_agreement_page.cus_datasink' | translate
        }}</mat-label>
        <textarea
          matInput
          placeholder='{"https://w3id.org/edc/v0.0.1/ns/type": "HttpData", ...}'
          [formControl]="ctrl"></textarea>
        <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
          {{ validationMessages.invalidJsonMessage }}
        </mat-error>
      </mat-form-field>

      <!-- Transfer Process Request JSON -->
      <mat-form-field
        *ngIf="
          form.dataAddressType === 'Custom-Transfer-Process-Request' &&
            form.all.controls.transferProcessRequest;
          let ctrl
        "
        color="accent">
        <mat-label>{{
          'contract_agreement_page.cus_transfer' | translate
        }}</mat-label>
        <textarea matInput [formControl]="ctrl" [placeholder]="'{}'"></textarea>
        <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
          {{ validationMessages.invalidJsonMessage }}
        </mat-error>
        <mat-hint>
          {{ 'contract_agreement_page.json_hint' | translate }}
        </mat-hint>
      </mat-form-field>

      <!-- Source Endpoint (Rest-Api) -->
      <ng-container *ngIf="form.dataAddressType === 'Http'">
        <!-- Method (Rest-Api) -->
        <div class="flex flex-row space-x-[10px]">
          <!-- Method (Rest-Api) -->
          <mat-form-field
            *ngIf="form.all.controls.httpMethod; let ctrl"
            class="w-1/3">
            <mat-label>{{ 'general.method' | translate }}</mat-label>
            <mat-select [formControl]="ctrl">
              <mat-option
                *ngFor="let method of dataSinkMethods"
                [value]="method"
                >{{ method }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field
            *ngIf="form.all.controls.httpUrl; let ctrl"
            class="grow"
            color="accent">
            <mat-label>URL</mat-label>
            <input matInput [formControl]="ctrl" [placeholder]="'https://'" />
            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.url">
              {{ validationMessages.invalidUrlMessage }}
            </mat-error>
          </mat-form-field>
        </div>

        <div class="form-section-title">{{ 'general.auth' | translate }}</div>

        <!-- Add Authentication Button -->
        <div
          *ngIf="form.all.controls.httpAuthHeaderType.value === 'None'"
          class="flex flex-row mb-[10px]">
          <button
            mat-button
            color="accent"
            (click)="
              form.all.controls.httpAuthHeaderType.setValue('Vault-Secret')
            ">
            {{ 'general.add_auth' | translate }}
          </button>
        </div>

        <!-- Auth Header Value Type -->
        <mat-form-field
          *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
          class="grow">
          <mat-label>Type</mat-label>
          <mat-select [formControl]="form.all.controls.httpAuthHeaderType">
            <mat-option value="Vault-Secret">
              {{ 'general.header_sec' | translate }}
            </mat-option>
            <mat-option value="Value">{{
              'general.header_val' | translate
            }}</mat-option>
          </mat-select>
        </mat-form-field>
        <div
          *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
          class="flex flex-row space-x-[10px]">
          <!-- Auth Header Name -->
          <mat-form-field class="w-1/3">
            <mat-label>{{ 'general.auth_header' | translate }}</mat-label>
            <input
              matInput
              placeholder="Authorization"
              [formControl]="form.all.controls.httpAuthHeaderName" />
          </mat-form-field>

          <!-- Auth Header Value -->
          <mat-form-field
            *ngIf="form.all.controls.httpAuthHeaderType.value === 'Value'"
            class="grow">
            <mat-label>{{ 'general.auth_value' | translate }}</mat-label>
            <input
              matInput
              placeholder="Bearer ..."
              [formControl]="form.all.controls.httpAuthHeaderValue" />
          </mat-form-field>

          <!-- Auth Header Secret Name -->
          <mat-form-field
            *ngIf="
              form.all.controls.httpAuthHeaderType.value === 'Vault-Secret'
            "
            class="grow">
            <mat-label>{{ 'general.vault_secret' | translate }}</mat-label>
            <input
              matInput
              placeholder="MySecret123"
              [formControl]="form.all.controls.httpAuthHeaderSecretName" />
          </mat-form-field>
        </div>

        <!-- Remove Authentication Button -->
        <div
          *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
          class="flex flex-row mb-[10px]">
          <button
            mat-button
            color="warn"
            (click)="form.all.controls.httpAuthHeaderType.setValue('None')">
            {{ 'general.rem_auth' | translate }}
          </button>
        </div>

        <div class="form-section-title">
          {{ 'general.add_header' | translate }}
        </div>

        <div
          *ngFor="
            let header of form.all.controls.httpHeaders.controls;
            let i = index
          "
          class="flex flex-row space-x-[10px]">
          <!-- Header Name -->
          <mat-form-field class="w-1/3">
            <mat-label>{{ 'general.header_name' | translate }}</mat-label>
            <input
              matInput
              placeholder="Header"
              [formControl]="header.controls.headerName" />
          </mat-form-field>

          <!-- Header Value -->
          <mat-form-field class="grow">
            <mat-label>{{ 'general.header_value' | translate }}</mat-label>
            <input
              matInput
              placeholder="..."
              [formControl]="header.controls.headerValue" />
          </mat-form-field>

          <!-- Header Delete Button -->
          <button
            mat-button
            color="warn"
            style="height: 54px; margin-top: 4px; margin-left: 8px"
            (click)="form.onHttpHeadersRemoveClick(i)">
            {{ 'general.remove' | translate }}
          </button>
        </div>

        <!-- Add Header Button -->
        <div class="flex flex-row mb-[10px]">
          <button
            mat-button
            color="accent"
            (click)="form.onHttpHeadersAddClick()">
            {{ 'general.add_add_header' | translate }}
          </button>
        </div>
      </ng-container>

      <ng-container
        *ngIf="form.dataAddressType !== 'Custom-Transfer-Process-Request'">
        <div class="form-section-title">
          {{ 'contract_agreement_page.http_para' | translate }}
        </div>

        <div class="text-sm mb-[10px] px-[3px]">
          {{ 'contract_agreement_page.http_message' | translate }}
        </div>

        <div
          *ngIf="proxyPath || proxyMethod"
          class="text-sm mb-[10px] px-[3px]">
          {{ 'contract_agreement_page.res_url' | translate }}
          <i>{{
            '{baseUrl}{customSubPath}?{baseQueryParams}&{customQueryParams}'
          }}</i>
        </div>

        <div
          *ngIf="proxyMethod || proxyPath"
          class="flex flex-row space-x-[10px]">
          <ng-container *ngIf="proxyMethod">
            <!-- Method (Rest-Api) -->
            <mat-form-field
              *ngIf="form.all.controls.httpProxiedMethod; let ctrl"
              [ngClass]="{'w-1/3': proxyPath}">
              <mat-label>{{
                'contract_agreement_page.cus_meth' | translate
              }}</mat-label>
              <mat-select
                [placeholder]="'contract_agreement_page.cus_meth' | translate"
                [formControl]="ctrl">
                <mat-option></mat-option>
                <mat-option
                  *ngFor="let method of dataSourceMethods"
                  [value]="method"
                  >{{ method }}</mat-option
                >
              </mat-select>
              <mat-hint>
                {{
                  'contract_agreement_page.proxy_method' | translate
                }}</mat-hint
              >
            </mat-form-field>
          </ng-container>

          <ng-container *ngIf="proxyPath">
            <!-- Default Path (Rest-Api) -->
            <mat-form-field
              *ngIf="form.all.controls.httpProxiedPath; let ctrl"
              class="grow">
              <mat-label>{{
                'contract_agreement_page.cus_sub' | translate
              }}</mat-label>
              <input
                matInput
                [formControl]="ctrl"
                [placeholder]="'sub-path/endpoint'" />
              <mat-hint>{{
                'contract_agreement_page.proxy_path' | translate
              }}</mat-hint>
            </mat-form-field>
          </ng-container>
        </div>

        <ng-container *ngIf="proxyQueryParams">
          <div
            *ngFor="
              let header of form.all.controls.httpProxiedQueryParams.controls;
              let i = index
            "
            class="flex flex-row space-x-[10px]">
            <!-- Query Param Name -->
            <mat-form-field class="w-1/3">
              <mat-label>{{
                'contract_agreement_page.cus_query' | translate
              }}</mat-label>
              <input
                matInput
                placeholder="key"
                required
                autocomplete="new-query-param-name"
                [formControl]="header.controls.paramName" />
              <mat-hint>
                {{ 'contract_agreement_page.proxy_query' | translate }}
              </mat-hint>
            </mat-form-field>

            <!-- Query Param Value -->
            <mat-form-field class="grow">
              <mat-label>{{ 'general.value' | translate }}</mat-label>
              <input
                matInput
                placeholder="..."
                autocomplete="new-query-param-value"
                [formControl]="header.controls.paramValue" />
            </mat-form-field>

            <!-- Query Param Delete Button -->
            <button
              mat-button
              color="warn"
              style="height: 54px; margin-top: 4px; margin-left: 8px"
              (click)="form.onHttpQueryParamsRemoveClick(i)">
              {{ 'general.remove' | translate }}
            </button>
          </div>

          <div class="flex flex-row mb-[10px] space-x-[10px]">
            <!-- Add Query Param Button -->
            <button
              mat-button
              color="accent"
              (click)="form.onHttpQueryParamsAddClick()">
              {{ 'contract_agreement_page.add_cus_query' | translate }}
            </button>
          </div>
        </ng-container>

        <ng-container *ngIf="proxyBody">
          <!-- Request Body Content Type -->
          <mat-form-field class="grow">
            <mat-label>{{
              'contract_agreement_page.req_cont' | translate
            }}</mat-label>
            <input
              matInput
              autocomplete="new-content-type"
              [formControl]="form.all.controls.httpProxiedBodyContentType"
              [placeholder]="'application/json'" />
            <mat-hint>
              {{ 'contract_agreement_page.proxy_body' | translate }}
            </mat-hint>
          </mat-form-field>

          <!-- Request Body -->
          <mat-form-field *ngIf="form.all.controls.httpProxiedBody; let ctrl">
            <mat-label>{{
              'contract_agreement_page.req_body' | translate
            }}</mat-label>
            <textarea
              matInput
              placeholder='{"some": "request-body"}'
              autocomplete="new-request-body"
              [formControl]="ctrl"></textarea>
            <mat-hint>
              {{ 'contract_agreement_page.proxy_body' | translate }}</mat-hint
            >
          </mat-form-field>
        </ng-container>

        <!-- Toggle Parameterization Fields Button -->
        <div
          *ngIf="
            showHttpParameterizationToggleButton &&
              form.all.controls.showAllHttpParameterizationFields;
            let ctrl
          "
          class="flex flex-row mb-[10px]">
          <button
            mat-button
            [color]="ctrl.value ? 'warn' : 'accent'"
            (click)="ctrl.setValue(!ctrl.value)">
            {{
              ctrl.value
                ? ('general.hide' | translate)
                : ('general.show' | translate)
            }}
            {{ 'contract_agreement_page.http_fields' | translate }}
          </button>
        </div>
      </ng-container>
    </div>
  </form>
</mat-dialog-content>

<mat-dialog-actions class="flex flex-row justify-end">
  <button
    mat-button
    color="default"
    [mat-dialog-close]="null"
    [disabled]="loading">
    {{ 'general.cancel' | translate }}
  </button>

  <button
    mat-raised-button
    color="primary"
    [disabled]="!form.all.valid || loading"
    (click)="onSave()">
    {{ 'contract_agreement_page.ini_transfer' | translate }}
  </button>
</mat-dialog-actions>
